<template>
	<div class="diy_menu">
		<h1>自定义菜单</h1>
		<div class="option_status">
			<img src="../../assets/images/manage/menu/edit.png" alt=""/>
			<div>
				<h3>编辑菜单中</h3>
				<p>菜单未发布，请确认菜单编辑完成后点击"保存并发布"同步到手机。<!--<span @click="notUse">请点击这里</span>--></p>
			</div>
		</div>
		<div class="no_menu_sort" v-if="!isMenuSort">
			<div class="phone_shows1">
				<!-- 自定义菜单还未选中 -->
				<div class="phone_show1">
					<h3>{{ appli.title }}</h3>
					<!-- 无更多 -->
					<div class="phone_show1_icons" v-if="!isShowMore">
						<div class="phone_show1_icon1"
						     v-for="item in menuData"
							 :key="item.module_id"
						     :class="{sel1:menuIndex!==-1,sel1_1:menuIndex===item.module_id}" @click="selIcon1(item.module_id)">
							<img :src="item.icon" alt="">
							<p>{{ item.user_module_name }}</p>
						</div>
					</div>
					<!-- 有更多 -->
					<div class="phone_show1_icons" v-if="isShowMore">
						<div class="phone_show1_icon1"
						     v-if="index!==4"
						     v-for="(item,index) in menuData.slice(0,5)"
							 :key="index"
						     :class="{sel1:menuIndex!==-1,sel1_1:menuIndex===item.module_id}" @click="selIcon1(item.module_id)">
							<img :src="item.icon" alt="">
							<p>{{ item.user_module_name }}</p>
						</div>
						<div class="phone_show1_icon1"
						     v-if="index===4"
						     v-for="(item,index) in menuData.slice(0,5)"
							 :key="index"
						     :class="{sel1:menuIndex!==-1,sel1_1:showMoreData}" @click="mores">
							<img src="../../assets/images/manage/menu/gr_discover.png" alt="">
							<p>更多</p>
						</div>
					</div>
					<!-- 点更多的数据集合 -->
					<div class="more_datas" v-if="showMoreData">
						<div class="more_lists">
							<div class="more_list" @click="goAddFunction">
								<h6>+</h6>
								<p>添加</p>
							</div>
							<div class="more_list" v-for="item in menuData.slice(4,menuData.length)" :key="item.module_id"
							     :class="{sel1:menuIndex!==-1,sel1_1:menuIndex===item.module_id}"
							     @click="selIcon1_1(item.module_id)">
								<img :src="item.icon" alt="">
								<p>{{ item.user_module_name }}</p>
							</div>
						</div>
					</div>
				</div>
				<div class="no_content_show" v-if="menuIndex===-1">点击左侧菜单进行编辑操作</div>
				<!-- 自定义菜单选中某个 -->
				<div class="content_show1" v-if="menuIndex!==-1" v-loading="loading2" element-loading-text="上传中...">
					<div class="content_show1_title">
						<p>菜单名称</p>
						<p @click="stopMenu">停用</p>
					</div>
					<div class="content_show1_text">
						<p>菜单名称</p>
						<input type="text" v-model="selMenuData.user_module_name"/>
					</div>
					<div class="content_show1_text">
						<p style="visibility:hidden;">菜单名称</p>
						<h6>字数不超过4个汉字或8个字符</h6>
					</div>
					<div class="content_show1_icons">
						<p>菜单图标</p>
						<div>
							<img :src="selIconUrl" alt="">
						</div>
						<button v-if="!isSwitchIcon" @click="isSwitchIcon=true">更换图标</button>
						<h3 v-if="isSwitchIcon">更换图标</h3>
					</div>
					<div class="all_icons" v-if="isSwitchIcon">
						<div class="icons1">
							<div class="icon1" :class="{selI:selIconId===item.id}" v-for="item in iconsData" :key="item.id" @click="selectIcon(item.id,item.img_path)">
								<img :src="item.img_path" alt="">
								<p>{{ selMenuData.user_module_name }}</p>
							</div>
						</div>
						<div class="icon1_cancel">
							<p @click="isSwitchIcon=false">取消</p>
							<p @click="selfDefinite">自定义</p>
							<input type="file" @change="onFileChange0" style="display:none;" id="upfile0">
						</div>
					</div>
				</div>
			</div>
			<div class="menu_sort">
				<button @click="menuSort">菜单排序</button>
				<button @click="save1">保存并发布</button>
				<button @click="previews">预览</button>
			</div>
		</div>
		<!-- 菜单排序 -->
		<div class="is_menu_sort" v-if="isMenuSort" @click="isMenuSort=false">
			<div class="phone_shows1">
				<div class="phone_show1">
					<h3>{{ appli.title }}</h3>
					<h6>本区域的功能将在更多中显示</h6>
					<div class="all_functions">
						<div class="phone_show1_icon1" v-for="color in menuData" v-dragging="{ item: color, list: menuData, group: 'color' }" :key="color.user_module_name">
							<img :src="color.icon" alt="">
							<p>{{ color.user_module_name }}</p>
						</div>
					</div>
				</div>
				<h3>请通过拖拽左边的菜单进行排序</h3>
			</div>
			<div class="sort_btns">
				<button @click.stop="finishSort">完成</button>
				<button @click.stop="isMenuSort=false">返回</button>
			</div>
			<div class="finish_mask" v-if="isFinishSort" @click.stop="isFinishSort=false">
				<button>菜单排序成功</button>
			</div>
		</div>
		<!-- 预览 -->
		<div class="is_preview" v-if="isPreview">
			<div class="phone_shows1">
				<div class="phone_show1">
					<h3 style="font-size:26px;">{{ appli.title }}</h3>
					<!-- 无更多 -->
					<div class="phone_show1_icons" v-if="!isShowMore">
						<div class="phone_show1_icon1"
						     v-for="item in menuData"
							 :key="item.module_id"
						     :class="{sel1:menuIndex!==-1,sel1_1:menuIndex===item.module_id}">
							<img :src="item.icon" alt="">
							<p>{{ item.user_module_name }}</p>
						</div>
					</div>
					<!-- 有更多 -->
					<div class="phone_show1_icons" v-if="isShowMore">
						<div class="phone_show1_icon1"
						     v-if="index!==4"
						     v-for="(item,index) in menuData.slice(0,5)"
							 :key="index"
						     :class="{sel1:menuIndex!==-1,sel1_1:menuIndex===item.module_id}">
							<img :src="item.icon" alt="">
							<p>{{ item.user_module_name }}</p>
						</div>
						<div class="phone_show1_icon1"
						     v-if="index===4"
						     v-for="(item,index) in menuData.slice(0,5)"
							 :key="index"
						     :class="{sel1:menuIndex!==-1,sel1_1:showMoreData}">
							<img src="../../assets/images/manage/menu/gr_discover.png" alt="">
							<p>更多</p>
						</div>
					</div>
					<!-- 点更多的数据集合 -->
					<div class="more_datas" v-if="showMoreData">
						<div class="more_lists">
							<div class="more_list">
								<h6>+</h6>
								<p>添加</p>
							</div>
							<div class="more_list" v-for="item in menuData.slice(4,menuData.length)" :key="item.module_id"
							     :class="{sel1:menuIndex!==-1,sel1_1:menuIndex===item.module_id}">
								<img :src="item.icon" alt="">
								<p style="white-space:nowrap;">{{ item.user_module_name }}</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<button @click="isPreview=false">退出预览</button>
		</div>
	</div>
</template>

<script>
	import {setCookie, getCookie, removeCookie, clearCookie} from '@/assets/js/cookie.js'
	export default {
		name: 'diy_menu',
		data() {
			return {
				appli: {}, //服务号信息
				username: '',
				menuData: [], //菜单列表
				showMoreData: false, //是否显示更多数据
				selMenuData: [], //选中的菜单数据
				menuIndex: -1, //底部icon索引
				stopIdArr: [], //停用菜单id集合
				isPreview: false, //是否预览
				iconsData: [], //所有icon数据
				selIconId: 0, //选中的icon id
				showImgUrl0: '', //自定义icon地址
				selIconUrl: '', //选中的icon地址
				isSwitchIcon: false, //是否切换图标
				isMenuSort: false, //是否菜单排序
				isFinishSort: false, //是否完成排序
				loading2: false,
				changeIcon: []
			}
		},
		components: {

		},
		computed: {
			//是否显示更多 菜单大于5显示
			isShowMore(){
				if(this.menuData.length > 5){
					return true;
				}else{
					return false;
				}
			}
		},
		watch: {
			selMenuData: {
				handler(val){
					let self = this;
					if(this.getLength(val.user_module_name) > 8){
						this.$alert('菜单名称过长，请重新输入', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								this.$set(self.selMenuData,'user_module_name','');
							}
						})
					}
				},
				deep: true
			}
		},
		created() {
			this.appli = JSON.parse(localStorage.getItem('appli'));
			if (localStorage.getItem('abAppUserName')) {
				this.username = localStorage.getItem('abAppUserName');
			}
		},
		mounted(){
			this.getMenu();
			this.getIcons();
		},
		methods: {
			//自定义菜单接口
			getMenu(){
				let obj = {};
				obj.userinfo = {
					uid: getCookie('UID'),
					token: getCookie('TOKEN')
				}
				obj.user_product_id = this.appli.id;
				obj.menu_config = this.appli.menu_config;
				this.$axiosGet('/api/moduleaaa/userpcmodulelist', {
					data: JSON.stringify(obj)
				}).then(res => {
					if(res.status === 200){
						this.menuData = res.data;
					}
				})
			},
			//显示icon列表接口
			getIcons(){
				let obj = {
					uid: getCookie('UID'),
					token: getCookie('TOKEN')
				};
				this.$axiosGet('/api/moduleaaa/iconList', {
					userinfo: JSON.stringify(obj)
				}).then(res => {
					this.iconsData = res;
				})
			},
			//选中icon
			selectIcon(id,url){				
				this.selIconId = id;
				this.selIconUrl = url;
				this.$set(this.selMenuData,'icon',url);
				this.isSwitchIcon = false;
				if(this.changeIcon.length > 0){
					this.changeIcon.forEach((i,v)=>{
						if(i.id === this.selMenuData.user_module_id){
							this.changeIcon.splice(v,1);
						}
					})
				}
				let obj = {};
				obj.id = this.selMenuData.user_module_id;
				obj.path = this.selMenuData.icon;
				this.changeIcon.push(obj);
				//console.log(this.changeIcon);
			},
			//更多
			mores(){
				this.menuIndex = -1;
				this.showMoreData = true;
			},
			//添加功能
			goAddFunction(){
				this.$emit('adds');
			},
			//停用菜单
			stopMenu(){
				this.menuData.forEach((i,v)=>{
					if(i.module_id === this.menuIndex){
						this.menuData.splice(v,1);
						this.menuIndex = -1;
						this.$message.success('已停用菜单：'+i.user_module_name);
						this.stopIdArr.push(i.user_module_id);
					}
				})
				this.stopIdArr = [...new Set(this.stopIdArr)];
			},
			//停用
			notUse(){
				let self = this;
				this.$confirm('确认停用菜单?','提示').then(()=>{
					this.$message({
						type: 'success',
						message: '操作成功'
					})
				}).catch(()=>{
					this.$message({
						message: '已取消操作'
					})
				})
			},
			//自定义菜单选中icon
			selIcon1(id) {				
				this.menuIndex = id;
				this.showMoreData = false;
				this.menuData.forEach((i,v)=>{
					if(i.module_id === id){
						this.selMenuData = i;
					}
				})
				this.selIconUrl = this.selMenuData.icon;
			},
			selIcon1_1(id){				
				this.menuIndex = id;
				this.showMoreData = true;
				this.menuData.forEach((i,v)=>{
					if(i.module_id === id){
						this.selMenuData = i;
					}
				})
				this.selIconUrl = this.selMenuData.icon;
			},
			//自定义
			selfDefinite(){
				document.getElementById("upfile0").click();
			},
			onFileChange0($event){
				let self = this;
				if ($event.target.files.length == 0){
					return ;
				}
				//图片预览fileReader
				let fr = new FileReader();
				fr.readAsDataURL($event.target.files[0]);
				if($event.target.files.length>0){
					this.loading2 = true;
				}
				fr.onload = function(evt){
					let obj = {
						upload: evt.target.result
					};
					//上传base64图片文件
					self.$axiosPost('/utils/files/uploadbase64.json?uid='+getCookie('UID')+'&token='+getCookie('TOKEN'),obj,true).then(res => {
						if(res.code === 200){
							self.loading2 = false;
							self.showImgUrl0 = res.data.fullpath;
							self.selIconUrl = res.data.fullpath;
							self.$set(self.selMenuData,'icon',res.data.fullpath);
						}
					})
				}
			},
			//菜单排序
			menuSort() {
				this.isMenuSort = true;
			},
			//保存并发布
			save1() {
				let obj = {};
				let arr1 = [];
				let arr2 = [];
				let arr3 = [];
				obj.userinfo = {
					uid: getCookie('UID'),
					token: getCookie('TOKEN')
				};
				obj.status = 2;
				obj.user_product_id = this.appli.id;
				obj.delete = this.stopIdArr;
				this.menuData.forEach((i,v)=>{
					let obj1 = {};
					obj1.id = i.user_module_id;
					obj1.name = i.user_module_name;
					let obj2 = {};
					obj2.id = i.user_module_id;
					arr1.push(obj1);
					arr3.push(i.user_module_id);
				})
				obj.moudel_name = arr1;
				if(this.changeIcon.length > 0){
					obj.icon = this.changeIcon;
				}else{
					obj.icon = [];
				}
				obj.sort = arr3;
				//console.log(obj);return;
				this.$axiosPost('/api/moduleaaa/useredit', {
					data: JSON.stringify(obj)
				}).then(res => {
					if(res.status === 1 || res.status === 0){
						this.$message.success('操作成功')
					}
				})
			},
			//预览
			previews() {
				this.isPreview = true;
			},
			//完成菜单排序
			finishSort(){
				this.isFinishSort = true;
			},
			//获取字符长度，包含汉字
			getLength(str) {
				var realLength = 0;
				var len = str.length;
				var charCode = -1;
				for (var i = 0; i < len; i++) {
					charCode = str.charCodeAt(i);
					if (charCode >= 0 && charCode <= 128)
						realLength += 1;
					else
						realLength += 2;
				}
				return realLength;
			},
		},
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.diy_menu {
		h1 {
			text-align: left;
			font-size: 34px;
			color: #000;
			font-weight: 500;
			padding: 38px 0 28px 72px;			
			border-bottom: 1px solid #cdcdcd;
		}
		.option_status {
			height: 120px;
			background: #f4f5f9;
			display: flex;
			align-items: center;
			padding: 0 44px;
			text-align: left;
			> img {
				width: 50px;
				height: 50px;
				margin-right: 10px;
			}
			> div {
				h3 {
					font-size: 24px;
					color: #666;
					font-weight: 400;
					margin-bottom: 6px;
				}
				p {
					font-size: 18px;
					color: #999;
					span {
						color: #3ca0ec;
						cursor: pointer;
						&:hover {
							text-decoration: underline;
						}
					}
				}
			}
		}
		.phone_shows1 {
			display: flex;
			padding: 20px 10px 20px 46px;
			.phone_show1 {
				width: 346px;
				height: 703px;
				background: url('../../assets/images/manage/menu/phone1.png') no-repeat;
				background-size: 100% 100%;
				position: relative;
				h3 {
					width: 85%;
					position: absolute;
					top: 70px;
					left: 50%;
					transform: translateX(-50%);
					font-size: 29px;
					color: #000;
				}
				.phone_show1_icons {
					position: absolute;
					bottom: 60px;
					left: 50%;
					transform: translateX(-50%);
					width: 90%;
					height: 58px;
					background: #f7f7f7;
					display: flex;
					flex-wrap: wrap;
					justify-content: center;
					.phone_show1_icon1 {
						width: 20%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						cursor: pointer;
						img {
							width: 25px;
							height: 25px;
							opacity: .2;
						}
						p {
							height: 22px;
							font-size: 14px;
							color: #7f7f7f;
							white-space: nowrap;
						}
					}
					.sel1 {
						img {
							opacity: 1;
						}
						p {
							color: #000;
						}
					}
					.sel1_1 {
						border: 1px solid #3ca0ec;
						img {
							opacity: 1;
						}
						p {
							color: #3ca0ec;
						}
					}
				}
				.more_datas{
					position: absolute;
					right: 10px;
					bottom: 125px;
					width: 35%;
					max-height: 400px;
					overflow: auto;
					background: #fff;
					padding: 5px 5px 10px 5px;
					/* 滚动条整体样式 */
					&::-webkit-scrollbar {
						width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
						height: 4px;
					}
					&::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
						border-radius: 5px;
						box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
						background: rgba(0,0,0,0.2);
					}
					&::-webkit-scrollbar-track {/*滚动条里面轨道*/
						box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
						border-radius: 0;
						background: rgba(0,0,0,0.1);
					}
					.sel1 {
						img {
							opacity: 1;
						}
						p {
							color: #000;
						}
					}
					.sel1_1 {
						border: 1px solid #3ca0ec;
						img {
							opacity: 1;
						}
						p {
							color: #3ca0ec;
						}
					}
					.more_lists{
						.more_list{
							width: 90%;
							display: flex;
							align-items: center;
							margin-top: 5px;
							cursor: pointer;
							img{
								width: 25px;
								height: 25px;
								margin-right: 5px;
							}
							p{
								font-size: 14px;
								color: #7f7f7f;
							}
							h6{
								font-size: 20px;
								margin: 0 10px 0 5px;
							}
						}
					}
				}
			}
			.no_content_show {
				font-size: 24px;
				color: #666;
				margin-left: 16%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			.content_show1 {
				width: 554px;
				background: #f4f5f9;
				border: 1px solid #e7e7eb;
				margin-left: 18px;
				padding-bottom: 20px;
				.content_show1_title {
					display: flex;
					justify-content: space-between;
					padding: 24px 22px;
					border-bottom: 1px solid #e4e8eb;
					p:nth-of-type(1) {
						font-size: 26px;
						color: #000;
						font-weight: 500;
					}
					p:nth-of-type(2) {
						font-size: 26px;
						color: #3ca0ec;
						cursor: pointer;
						&:hover {
							text-decoration: underline;
						}
					}
				}
				.content_show1_text {
					display: flex;
					align-items: center;
					padding: 0 22px;
					margin: 36px 0 26px 0;
					p {
						font-size: 26px;
						color: #666;
						margin-right: 42px;
					}
					input {
						width: 356px;
						height: 80px;
						line-height: 80px;
						border: 1px solid #ddd;
						font-size: 35px;
						color: #999;
						padding: 0 24px;
					}
					h6 {
						font-size: 25px;
						color: #999;
						font-weight: 400;
					}
				}
				.content_show1_icons {
					display: flex;
					align-items: center;
					justify-content: space-around;
					margin-top: 50px;
					p {
						font-size: 26px;
						color: #666;
					}
					> div {
						width: 88px;
						height: 82px;
						background: #fff;
						display: flex;
						align-items: center;
						justify-content: center;
						border: 1px solid #ddd;
						img {
							width: 50px;
							height: 50px;
						}
					}
					button {
						width: 180px;
						height: 56px;
						line-height: 56px;
						background: #fff;
						font-size: 24px;
						color: #666;
						border: 1px solid #b1b1b1;
					}
					h3 {
						width: 180px;
						font-size: 24px;
						color: #3ca0ec;
						font-weight: 400;
					}
				}
				.all_icons {
					width: 94%;
					height: 250px;
					overflow: auto;
					margin: 8px auto;
					background: #fff;
					border: 1px solid #b1b1b1;
					padding: 14px 0;
					/* 滚动条整体样式 */
					&::-webkit-scrollbar {
						width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
						height: 4px;
					}
					&::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
						border-radius: 5px;
						box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
						background: rgba(0,0,0,0.2);
					}
					&::-webkit-scrollbar-track {/*滚动条里面轨道*/
						box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
						border-radius: 0;
						background: rgba(0,0,0,0.1);
					}
					.icons1 {
						display: flex;
						flex-flow: wrap;
						.icon1 {
							width: 10%;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: space-around;
							margin-bottom: 28px;
							cursor: pointer;
							&:hover {
								background: #ddd;
							}
							img {
								width: 18px;
								height: 18px;
								margin-bottom: 8px;
							}
							p {
								font-size: 8px;
								color: #999;
							}
						}
						.selI{
							border: 1px solid #3ca0ec;
						}
					}
					.icon1_cancel {
						display: flex;
						justify-content: flex-end;
						p {
							font-size: 18px;
							color: #666;
							margin-right: 36px;
							cursor: pointer;
						}
					}
				}
			}
		}
		.menu_sort {
			display: flex;
			padding: 0 106px;
			button:nth-of-type(1),
			button:nth-of-type(3) {
				width: 182px;
				height: 55px;
				line-height: 55px;
				background: #fff;
				font-size: 24px;
				color: #666;
				border: 1px solid #b1b1b1;
			}
			button:nth-of-type(2) {
				width: 200px;
				height: 55px;
				line-height: 55px;
				background: #3ca0ec;
				font-size: 24px;
				color: #fff;
				margin: 0 38px 0 149px;
			}
			button:nth-of-type(3) {
				width: 152px;
			}
		}
		.is_preview {
			position: fixed;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			background: rgba(0, 0, 0, .5);
			z-index: 99;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.phone_shows1 {
				padding: 0;
				.phone_show1 {
					width: 300px;
					height: 600px;
					background: url('../../assets/images/manage/menu/YourScreenHere1.png') no-repeat;
					background-size: 100% 100%;
					position: relative;
					.phone_show1_icons {
						width: 86%;
						.phone_show1_icon1 {
							cursor: default;
						}
					}
				}
			}
			button {
				width: 190px;
				height: 58px;
				line-height: 58px;
				background: #fff;
				font-size: 19px;
				color: #3ca0ec;
				border-radius: 5px;
				margin-top: 36px;
			}
		}
		.is_menu_sort {
			text-align: left;
			.phone_shows1{
				display: flex;
				align-items: center;
				>h3{
					font-size: 24px;
					color: #666;
					font-weight: 400;
					margin-left: 16%;
				}
				.phone_show1{
					position: relative;
					h6{
						position: absolute;
						bottom: 240px;
						left: 50%;
						transform: translateX(-50%);
						font-size: 13px;
						color: #a0a0a0;
						font-weight: 400;
					}
					.all_functions{
						width: 90%;
						background: #f5f5f5;
						position: absolute;
						bottom: 58px;
						left: 50%;
						transform: translateX(-50%);
						display: flex;
						flex-wrap: wrap-reverse;
						.phone_show1_icon1{
							width: 20%;
							height: 64px;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							border: 1px solid #c3c3c3;
							img{
								width: 25px;
								height: 25px;
							}
							p{
								height: 22px;
								font-size: 14px;
								color: #7f7f7f;
								white-space: nowrap;
							}
						}
					}
				}
			}
			.sort_btns{
				display: flex;
				button{
					width: 180px;
					height: 55px;
					line-height: 55px;
					background: #fff;
					font-size: 24px;
					color: #666;
					border: 1px solid #b1b1b1;
					margin-left: 50px;
				}
			}
			.finish_mask{
				position: fixed;
				top: 0;
				left: 0;
				bottom: 0;
				right: 0;
				margin: auto;
				background: rgba(0,0,0,.5);
				z-index: 999;
				display: flex;
				align-items: center;
				justify-content: center;
				button{
					border: none;
					width: 39.3%;
					height: 52px;
					line-height: 52px;
					background: #3ca0ec;
					font-size: 24px;
					color: #fff;
				}
			}
		}
	}
</style>